/* eslint-disable react/jsx-key */
import SignWriteModal from "@/components/SignWriteModal";
import { CheckOutlined, PlusOutlined } from "@ant-design/icons";
import { ProList } from "@ant-design/pro-components";
import { Button, Card, Image, List, message } from "antd";
import { useEffect, useState } from "react";
import styles from "./index.module.less";
import { getList, remove, save, update } from "@/services/api/module/system/signature";
const CardList = () => {
	const [open, setOpen] = useState<boolean>(false);
	const [isHovering, setIsHovering] = useState(false);
	const [data, setData] = useState<any>([{}]);
	const [messageApi, contextHolder] = message.useMessage();
	const getData = () => {
		getList().then((data: any) => {
			setData([{}, ...data]);
		});
	};
	useEffect(() => {
		getData();
	}, []);

	const handleMouseEnter = () => {
		setIsHovering(true);
	};

	const handleMouseLeave = () => {
		setIsHovering(false);
	};
	// 保存电子签名
	const handleSaveSersignature = (value: string) => {
		return save({
			signature: value,
			isDefault: "Y"
		})
			.then((res: any) => {
				message.success(res?.msg);
				getData();
				return Promise.resolve(true);
			})
			.catch(() => {
				return Promise.reject(false);
			});
	};
	const removeById = (id: number) => {
		remove(id).then((res: any) => {
			message.success(res.msg);
			getData();
		});
	};
	const onDefault = (id: number) => {
		messageApi.open({
			type: "loading",
			content: "正在处理设置默认签名...",
			duration: 0
		});
		update({
			id: id,
			isDefault: "Y"
		}).then((res: any) => {
			messageApi.destroy();
			message.success(res.msg);
			getData();
		});
	};
	return (
		<div>
			{contextHolder}
			<ProList<any>
				ghost
				rowKey="id"
				pagination={false}
				grid={{ gutter: 16, column: 5 }}
				onItem={(record: any) => {
					return {
						onMouseEnter: () => {
							console.log(record);
						},
						onClick: () => {
							console.log(record);
						}
					};
				}}
				dataSource={data}
				renderItem={(item: any) => {
					if (!item || !item?.id) {
						return (
							<List.Item>
								<Card
									bordered
									className={styles.cardBtn}
									onClick={() => {
										setOpen(true);
									}}
								>
									<PlusOutlined style={{ fontSize: "40px", color: "#8c8c8c" }} />
								</Card>
							</List.Item>
						);
					}
					return (
						<List.Item key={item?.id}>
							<Card
								className={styles.content}
								styles={{
									body: {
										padding: 0,
										height: 150
									}
								}}
								style={{ border: item?.isDefault === "Y" ? "1px solid #1677ff" : "none" }}
							>
								{item?.isDefault === "Y" && (
									<div className={styles.defaultIcon}>
										<span className={styles.triangle} />
										<CheckOutlined className={styles.checkIcon} />
									</div>
								)}
								<div className={styles.cardWrapper} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
									<Image preview={false} height="100%" src={item?.signature} />
									{isHovering && (
										<div className={styles.overlay}>
											<div className={styles.buttonWrapper}>
												{item?.isDefault === "N" && (
													<Button
														type="primary"
														onClick={() => {
															onDefault(item?.id);
														}}
													>
														设为默认
													</Button>
												)}
												<Button
													type="primary"
													danger
													style={{ marginLeft: "10px" }}
													onClick={() => {
														removeById(item?.id);
													}}
												>
													删除
												</Button>
											</div>
										</div>
									)}
								</div>
							</Card>
						</List.Item>
					);
				}}
			/>
			<SignWriteModal
				open={open}
				onCancel={() => {
					setOpen(false);
				}}
				onOk={(value: string) => {
					return handleSaveSersignature(value);
				}}
			/>
		</div>
	);
};

export default CardList;
